<template>
	<view class="u-page">
	    <scroll-view
	      scroll-y
	      refresher-enabled
	      class="shop-count"
	      @scrolltolower="onScrollTolower"
	    >
	      <uv-skeletons
	        v-for="(item, index) in Array(15)"
	        :key="index"
	        :loading="loading"
	        :skeleton="skeleton"
	      ></uv-skeletons>
	      <view class="shop-count-card flex-c" v-for="item in list" :key="item.id">
	        <view class="flex just-b m-b-10">
	          <uv-text align="left" :text="item.order_sn"></uv-text>
	          <p style="color: #969799; font-size: 24rpx">
	            <span v-if="item.payment == 1">余额支付</span>
	            <span v-else-if="item.payment == 2">微信支付</span>
	            <span v-else-if="item.payment == 3">支付宝</span>
	            <span v-else>{{ item.payment }}</span>
	          </p>
	        </view>
	        <view class="flex just-b">
	          <view>
	            <uv-text
	              align="left"
	              size="13"
	              type="info"
	              :text="`用户昵称：${item.realname}`"
	            ></uv-text>
	            <uv-text align="left" size="13" type="info" :text="item.pay_time"></uv-text>
	          </view>
	          <uv-text align="right" size="13" type="info" :text="`+${item.pay_money}`"></uv-text>
	        </view>
	      </view>
	      <uv-load-more v-if="!refresherTriggered" :status="status" />
	    </scroll-view>
	  </view>
</template>

<script>
	export default {
		data(){
			return {
				pageInfo: {
					page: 1,
					last_page: 0,
					total: 0,
					per_page: 0
				},
				list: [],
				loading: false,
				status: 'loadmore',
				refresherTriggered: false,
				skeleton: [
				    {
				      type: 'line',
				      num: 1,
				      gap: '20rpx',
				      style: ['height: 100rpx;margin-bottom: 10px']
				    }
				]
			}
		},
		onLoad() {
			this.getAccountLogList()
		},
		methods:{
			onScrollTolower(){
				if (this.loading) {
				  return
				}
				if (this.list.length < this.pageInfo.total) {
				  this.pageInfo.page++
				  this.getAccountLogList()
				}
			},
			// /master/index/accountLogList'
			getAccountLogList(){
				uni.showLoading({
					title:'loading...',
					mask: true
				});
				this.loading = true
				this.status = 'loading'
				const city=uni.getStorageSync('city');
				const params = {
					city: city.split(','),
					page: this.pageInfo.page
				}
				this.$http.http('master/index/accountLogList',params,'POST').then(res=>{
					console.log('res', res);
					if(res.status === 200){
						this.list = res.data.data
						this.pageInfo.page++
						this.pageInfo.last_page =  res.data.last_page
						this.pageInfo.total =  res.data.total
						this.pageInfo.per_page =  res.data.per_page
						
						this.refresherTriggered = false
						if (res.data.data.length !== res.data.per_page) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.loading = false	
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.u-page {
	    height: 100vh;
	    overflow: hidden;
	  }
	  .shop-count {
	    box-sizing: border-box;
	    height: calc(100vh - 40px);
	    overflow-y: scroll;
	    padding-bottom: 80rpx;
	    background-color: rgb(250, 250, 250);
	    padding: 12rpx;
	  }
	  .shop-count-card {
	    border-radius: 12rpx;
	    padding: 10rpx;
	    margin-bottom: 12rpx;
	    background-color: #fff;
	    display: flex;
	    justify-content: space-between;
	  }
</style>